<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  
		xmlns:h="http://java.sun.com/jsf/html"  
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:c="http://java.sun.com/jsp/jstl/core"
        xmlns:a4j="http://richfaces.org/a4j"
        xmlns:rich="http://richfaces.org/rich"> 
    
    <h:body>
        <div id="messagesFormInscription" class="display_none subGlobalError"></div>
        <h:form id="formRegistration" class="center">
            <h:panelGrid columns="2" class="center" cellpadding="20" >
                <h:column>
                    <fieldset>
                        <legend><h3>Informations personnelles</h3></legend>
                        <h:panelGrid columns="3" cellpadding="10">
                            <h:outputText value="Nom :" />
                            <h:inputText id="userName" value="#{userManager.lastName}" class="validate[required]"/>
                            <rich:message for="userName" />

                            <h:outputText value="Prénom :" />
                            <h:inputText id="userFirstName" value="#{userManager.firstName}" class="validate[required]"/>
                            <rich:message for="userFirstName" />

                            <h:outputText value="E-mail :" />
                            <h:inputText id="userMail" value="#{userManager.email}" class="validate[required, custom[email]]"/>
                            <rich:message for="userMail"/>

                            <h:outputText value="Pseudo :" />
                            <h:inputText id="userLogin" value="#{userManager.login}" class="validate[required]"/>
                            <rich:message for="userLogin" />

                            <h:outputText value="Mot de passe :" />
                            <h:inputSecret id="userPassword" value="#{userManager.password}" class="validate[required], userPassword"/>
                            <rich:message for="userPassword" />

                            <h:outputText value="Confirmation mot de passe :" />
                            <h:inputSecret id="userPassword2" value="#{userManager.passwordBis}" class="validate[required], equalsTo-userPassword"/>
                            <rich:message for="userPassword2"/>
                            
                        </h:panelGrid>
                    </fieldset>
                </h:column>

                <h:column>
                    
                    <fieldset>
                        <legend><h3>Adresse de livraison</h3></legend>
                    
                        <h:panelGrid columns="3" cellpadding="10">
                            <h:outputText value="Pays :" />
                            <h:inputText id="userCountry" value="#{userManager.country}" class="validate[required]"/>
                            <rich:message for="userCountry" />

                            <h:outputText value="Ville :" />
                            <h:inputText id="userCity" value="#{userManager.city}" class="validate[required]"/>
                            <rich:message for="userCity" />

                            <h:outputText value="Code postal :" />
                            <h:inputText id="userZipCode" value="#{userManager.zipCode}" class="validate[required]"/>
                            <rich:message for="userZipCode" />

                            <h:outputText value="Adresse :" />
                            <h:inputTextarea id="userLine1" rows="3"  value="#{userManager.line1}" class="validate[required]"/>
                            <rich:message for="userLine1" />

                            <h:outputText value="Complément d'adresse :" />
                            <h:inputTextarea id="userLine2" value="#{userManager.line2}" />
                            <rich:message for="userLine2" />
                            
                        </h:panelGrid>
                    </fieldset>
                </h:column>
            </h:panelGrid>
            <br />
            <h:commandButton action="#{userManager.registration()}" value="Inscription" class="btn btn-primary" style="margin-left: 20px" />
        </h:form>
    </h:body>
    
    <script type="text/javascript">
        $j(function(){
            var form = "#formRegistration";

            // Load validationEngine for check in real time the user entries.
            $j(form).validationEngine('attach');
            
            // Auto detect password not equals.
                    $j('.equalsTo-userPassword').blur(function(){
                        if($j('.equalsTo-userPassword').val() != $j('.userPassword').val()){
                            displayMessage("Les mots de passes ne sont pas identiques !", 'error', false, 'messagesFormInscription', false, true);
                            getSubmitButtonByForm(form).attr("disabled", "disabled");
                        }else{
                            hideMessage("messagesFormInscription");
                            getSubmitButtonByForm(form).removeAttr("disabled");
                        }
                    });

                    $j('.userPassword').keyup(function(){
                        // Un mot de passe a déjà été saisi dans la confirmation de mot de passe.
                        if($j('.equalsTo-userPassword').val() != ""){
                            if($j('.equalsTo-userPassword').val() == $j('.userPassword').val()){
                                // Mot de passes identiques.
                                hideMessage("messagesFormInscription");
                                getSubmitButtonByForm(form).removeAttr("disabled");
                            }else{
                                // Mots de passes différents.
                                displayMessage("Les mots de passes ne sont pas identiques !", 'error', false, 'messagesFormInscription', false, true);
                                getSubmitButtonByForm(form).attr("disabled", "disabled");
                            }
                        }
                    });
                    
                    $j('.equalsTo-userPassword').keyup(function(){
                        if($j('.equalsTo-userPassword').val() == $j('.userPassword').val()){
                            if($j('.equalsTo-userPassword').val() != ""){
                                // Mot de passes identiques.
                                hideMessage("messagesFormInscription");
                                getSubmitButtonByForm(form).removeAttr("disabled");
                            }else if($j('.equalsTo-userPassword').val() != $j('.userPassword').val()){
                                // Mots de passes différents.
                                displayMessage("Les mots de passes ne sont pas identiques !", 'error', false, 'messagesFormInscription', false, true);
                                getSubmitButtonByForm(form).attr("disabled", "disabled");
                            }
                        }else{
                            if($j('.equalsTo-userPassword').val() != ""){
                                // Mots de passes différents.
                                displayMessage("Les mots de passes ne sont pas identiques !", 'error', false, 'messagesFormInscription', false, true);
                                getSubmitButtonByForm(form).attr("disabled", "disabled");
                            }
                        }
                    });
        });

    </script>
</html>

